<template>
    <div id="setup">
        <!-- 头部 -->
        <my-header fixed title='系统设置'>
            <a class="back-black" slot='left' @click='$router.go(-1)'></a>
        </my-header>
        <!-- 正文 -->
        <div class="content">
            <div class="container" style="background:#f5f5f5">
                <div class="group">
                    <ul>
                        <li @click.stop='goToMyPersonData'>
                            <div class="list_box">
                                <span>编辑资料</span>
                            </div>
                            <img src="~@/assets/img/p_arrow.png">
                        </li>
                        <li>
                            <div class="list_box">
                                <span>修改密码</span>
                            </div>
                            <img src="~@/assets/img/p_arrow.png">
                        </li>
                    </ul>
                </div>
                <div class="group">
                    <ul>
                        <li>
                            <div class="list_box">
                                <span>关于链视界</span>
                            </div>
                            <img src="~@/assets/img/p_arrow.png">
                        </li>
                    </ul>
                </div>
                <div class="group">
                    <ul>
                        <li @click.stop='outLogin'>
                            <div class="list_box outbtn">
                                <span>退出登录</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
import { remove_local_cache } from '@/config/cache'
export default {
    name: 'setup',
    data() {
        return {
            GPSLocation: {}
        }
    },
    computed: {
        ...mapGetters('login', [
            'isLogin'
        ])
    },
    methods: {
        ...mapMutations('login', [
            'set_isLogin'
        ]),
        ...mapMutations('user', [
            'set_userInfo'
        ]),
        ...mapActions('login', [
            'get_userPower_data'
        ]),
        // 我的权重
        goToMyPersonData() {
            if (this.isLogin) {
                this.$router.push({name: 'userInfo'})
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        },

        // 退出登录
        outLogin() {
            if (this.isLogin) {
                this.$msgBox.confirm('请确认退出').then(action => {
                    let data = {
                      headimgurl: '',
                      nickname: null,
                      member_content_num: '--',
                      collect_num: '--',
                      collected_num: '--',
                      integral: '--',
                      gold: '--'
                    }
                    this.set_isLogin('')
                    this.set_userInfo(data)
                    remove_local_cache('token')
                    this.$router.go(-1)
                    this.$toast({ message: '已退出登录', duration: 1500 })
                })
            } else {
                this.$toast({ message: '未登录', duration: 1500 })
            }
        }
    }
}
</script>
<style lang='stylus'>
#setup{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 16px;
    .group{
        padding-top: 1rem;
        ul{
            li{
                color: #333;
                min-height: 1.5rem;
                background #fff;
                line-height : 1.5rem;
                padding-left: 0.5rem;
                padding-right: 0.25rem;
                position relative;
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                align-items: center;
               .list_box{
                 display: flex;
                 display: -webkit-flex;
                 align-items: center;;
                 img{
                   width: 25px;
                   height: 25px;
                 }
                 span{
                   padding-left: 10px;
                 }
               }
               img{
                    width: 35px;
                    height: 35px;
               }
               .outbtn{
                   text-align : center;
                   width: 100%;
                   span{
                       width: 100%;
                       padding : 0;
                       color : #f23030;
                   }
               }
            }
            li:after{
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0px;
                height: 1px;
                content: '';
                background-color: #f3f3f3;
            }
            li:last-child:after{
                display : none;
            }

        }
    }
}
</style>
